<template>
    <basic-layout style="backgroundColor: #F4F7FA" :showAddBtn="false"
        title="所属房间设置">
        
        <div class="addressEdit">
            <van-form ref="form" label-width="4.1em">
                <van-field label="姓名" :value="userInfo.name" readonly/>
                <van-field v-model="roomValue" required is-link readonly
                    name="房间" label="所属房间" placeholder="点击选择楼宇/楼层/房间"
                    :error="false" :rules="ruleForm.roomValue" rows="1" autosize
                    @click="showArea = true" type="textarea"
                />
                <van-popup v-model="showArea" round position="bottom">
                    <van-cascader v-model="cascaderValue" title="请选择所属房间"
                    :options="dataList" @change="loadData" :closeable="false"
                    @close="show = false" @finish="onFinish" />
                </van-popup>
            </van-form>

        
            <van-cell class="defBox" title="是否关联所属房间">
                <template #right-icon>
                    <van-switch style="font-size: 24px;" :disabled="!Boolean(formData.addrId)" :value="associated" @input="isSwitch" />
                </template>
            </van-cell>
            
            <div class="btnBox">
                <van-button round type="info" block :disabled="!associated"
                @click="onSubmit">保存</van-button>
            </div>
        </div>
    </basic-layout>
</template>

<script>
    import { queryBuilding,queryFloors,queryRoom,queryAssociated,
    associatedRoom,cancelAssoRoom } from '@api/platframe/mainFrame/myRoom';

    export default {
        props: {

        },
        components: {

        },
        data () {
            return {
                roomValue: "", //所选房间
                cascaderValue: "",
                showArea: false, // 选择所属房间弹窗显示
                associated: true,
                dataList: [], // 
                // 房间信息初始值
                formData: {
                    addrId: "",  // 收货地址标识
                    lyId: "", // ly编码
                    lyName: "",// ly名称
                    lcId: "",// lc编码
                    lcName: "",// lc名称
                    fjId: "",// fj编码
                    fjName: "",// fj名称
                    staffId: "", // 人员标识
                },
                // 必填项校验
                ruleForm: {
                    roomValue: [
                        { required: true, message: "请选择所属房间", trigger: "blur" },
                    ],
                },
            };
        },
        computed: {
            userInfo() {
                return this.$store.state.userInfo;
                //  || {
                //     "roleName": "张先生",
                //     'user':'072FAD2E784842D6982E8982F0060E7F'
                // }
            },
        },
        watch: {

        },
        methods: {
            // 获取所属房间信息
            async getInit() {
                let res =  await queryAssociated({ 'staffId': this.userInfo.user});
                if (res.status === 0 && res.data) {
                    this.formData.addrId = res.data.fjSign,     // 收货地址标识
                    this.formData.lyId = res.data.LYID,         // ly编码
                    this.formData.lyName = res.data.FANGCNAME,  // ly名称
                    this.formData.lcId = res.data.LCID,         // lc编码
                    this.formData.lcName = res.data.LCNAME,     // lc名称
                    this.formData.fjId = res.data.FJID,         // fj编码
                    this.formData.fjName = res.data.FJNAME,     // fj名称
                        
                    this.roomValue = res.data.FANGCNAME +"/"+ res.data.LCNAME +"/"+ res.data.FJNAME;
                }
            },
            // 获取楼宇
            getBuildings() {
                let obj = {
                    "pageIndex": 1,
                    "pageSize": 100,
                    "staffId": this.userInfo.user
                }
                queryBuilding(obj).then((res) => {
                    if (res.status === 0) {
                        this.dataList = res.data.map(val=>{
                            return {
                                text: val.FANGCNAME,
                                value: val.ID,
                                level: 1,
                                children: []
                            }
                        })
                    }
                });
            },
            // 获取楼层
            getFloors(id) {
                let arrData = [];

                let obj = { "lyId": id }
                queryFloors(obj).then(res=>{
                    if (res.status === 0) {
                        res.data.map(val=>{
                            arrData.push({
                                text: val.NAME,
                                value: val.ID,
                                children: []
                            })
                        })
                    } else {
                        this.$Notify({ type: 'warning', message: res.message });
                    }
                });
                
                return arrData;
            },
            // 获取房间
            getRoom(id) {
                let arrData = [];

                let obj = { 
                    "lcId": id,
                    "pageIndex": 1,
                    "pageSize": 100,
                }
                queryRoom(obj).then(res=>{
                    if (res.status === 0) {
                        res.data.map(val=>{
                            arrData.push({
                                text: val.NAME,
                                value: val.ID
                            })
                        })
                    } else {
                        this.$Notify({ type: 'warning', message: res.message });
                    }
                });
                
                return arrData;
            },
            // 切换楼宇/楼层/房间
            loadData(item) {
                console.log(item);
                if (item.tabIndex === 0) {
                    let data = this.getFloors(item.value);
                    item.selectedOptions[0].children = data;
                } else if (item.tabIndex === 1) {
                    let data = this.getRoom(item.value);
                    item.selectedOptions[1].children = data;
                }
            },
            // 全部选项选择完毕后，会触发 finish 事件
            onFinish(item) {
                this.showArea = false;
                this.roomValue = item.selectedOptions
                    .map((option) => option.text)
                    .join("/");
                this.formData.lyId = item.selectedOptions[0].value;
                this.formData.lcId = item.selectedOptions[1].value;
                this.formData.fjId = item.selectedOptions[2].value;
            },
            // 切换是否关联
            isSwitch(checked) {
                // false 不关联，删除所属房间
                if (!checked) {
                    this.$Dialog.confirm({
                        title: '取消关联将删除所属房间信息！',
                    }).then(() => {
                        this.delRoom();
                    });
                } else {
                    this.associated = true;
                }
            },
            // 走删除接口
            delRoom() {
                cancelAssoRoom({"staffId": this.userInfo.user}).then( res =>{
                    if (res.status === 0) {
                        this.$Notify({ type: 'success', message: res.message });
                        this.associated = false;
                    } else {
                        this.$Notify({ type: 'warning', message: res.message });
                    }
                })
            },
            // 保存
            onSubmit() {
                // 全局表单验证
                this.$refs.form.validate().then(() => {
                    this.interface();
                }).catch(() => {
                    // this.$toast.fail('请完成必填项！')
                })
            },
            // 走接口
            interface() {
                let obj = { 
                    fjId: this.formData.fjId,
                    staffId: this.userInfo.user,
                    fjSign: this.formData.addrId
                };
                
                associatedRoom(obj).then(res=>{
                    if (res.status === 0) {
                        this.$Notify({ type: 'success', message: res.message });
                        this.$router.go(-1);
                    } else {
                        this.$Notify({ type: 'warning', message: res.message });
                    }
                })
            },
        },
        created () {

        },
        mounted () {
            this.formData.staffId = this.userInfo.user;
            this.getBuildings();
            this.getInit();
        }
    };
</script>

<style scoped lang="less">
::v-deep .van-nav-bar__left{
    i, .van-nav-bar__text{
        color: #000;
    }
}
::v-deep .van-button--danger {
    background-color: #1989fa;
    border-color: #1989fa;
}
.addressEdit {
    padding: 12px;
    .van-form {
        div:nth-child(1){
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        div:nth-child(4){
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }
    }
    .fieldsBox {
        overflow: hidden;
        border-radius: 10px;
    }
    .defBox {
        margin-top: 12px;
        overflow: hidden;
        border-radius: 8px;
    }
    .btnBox {
        padding: 32px 0px;
        .van-button {
            margin-bottom: 12px;
        }
    }
}
</style>